import Vue from 'vue';
import app from './App.vue';

// 快速生成一些原生样式
import './lib/mui/css/mui.min.css'
import './lib/mui/css/icons-extra.css'

import Vuex from 'vuex';
Vue.use(Vuex);
let shoppingCart = JSON.parse(localStorage.getItem('shoppingCart') || '[]');

let store = new Vuex.Store({
    state: {
        //  一直在想为什么这么写，而不是用[]，看到参考代码才知道，
        //  上面会对这个变量进行初始化，先从本地存储中拿数据
        shoppingCart: shoppingCart  
        /*         {
                    prodId: '',
                    prodTitle: '',
                    prodPrice: '',
                    prodQty: '',
                    prodFlag: false
                } */
    },
    mutations: {
        // 产品详情页添加购物车，更新购物车信息。如果存在商品，就增加数量。没有则对数组增加对象
        addShoppingCart(state, addItem) {
            let isNewItem = true;
            // 先遍历store中的数组，如果存在商品，则更新商品的订购数量
            state.shoppingCart.some(item => {
                if (item.prodId === addItem.prodId) {
                    item.prodQty += parseInt(addItem.prodQty);  // 两边的数字都得parseint，否则还是会变成字符串拼接
                    isNewItem = false;
                    return;
                }
            })
            if (isNewItem)
                state.shoppingCart.push(addItem);
            localStorage.setItem('shoppingCart', JSON.stringify(state.shoppingCart));
        },

        //  删除购物车的对应商品数量在store中的值
        deleteCartItem(state, id) {
            state.shoppingCart.some((item, i) => {    //需要加上索引值i，数组操作不熟悉啊
                if (item.prodId === id) {
                    state.shoppingCart.splice(i, 1);
                    return;
                }
            })
            localStorage.setItem('shoppingCart', JSON.stringify(state.shoppingCart));
        },

        //  更新购物车的对应商品数量在store中的值
        updateShoppingCart(id, val) {

        }

    },
    getters: {

        // 获取已加入购物车中的所有商品的数量
        getTotalQty(state) {
            let totalQty = 0;
            state.shoppingCart.forEach(element => {
                totalQty += element.prodQty;
            });
            return totalQty;
        },

        //  获取购物车总价
        getTotal(state) {
            let total = 0;
            state.shoppingCart.forEach(element => {
                total += element.prodQty * element.prodPrice;
            });
            return total;
        },

        //  获取购物车中的对象数组
        getAllItems(state) {
            return state.shoppingCart;
        }

    }
})


// 处理路由
import VueRouter from 'vue-router';
Vue.use(VueRouter);
import router from './router';

// 处理相应的UI组件
import MintUI from 'mint-ui';
Vue.use(MintUI);
import 'mint-ui/lib/style.css'

// 处理后台接口调用
import VueResouce from 'vue-resource';
Vue.use(VueResouce);
Vue.http.options.root = 'http://www.liulongbin.top:3005';
Vue.http.options.emulateJSON = true;

// 处理日期格式化的需求
import moment from 'moment';
Vue.filter('dateFormat', function (dateStr, pattern = 'YYYY-MM-DD HH:mm:ss') {
    return moment(dateStr).format(pattern);
})

// 生成缩略图
import VuePreview from 'vue-preview';
Vue.use(VuePreview);

// 生成vue实例

let vm = new Vue({
    el: '#app',

    render: createEls => createEls(app),
    router,
    store
});

